<template>
  <div>
    <img src="http://192.168.67.68:1337/categories/3" alt="">
    <!-- 按钮 -->
    <el-row>
      <el-col :span="24" class="categories">
        <el-button type="primary" @click="addFn">添加分类</el-button>
        <div>
          <el-input v-model="search" placeholder="请输入关键词"></el-input>
          <el-button class="search" @click="searchFn" icon="el-icon-search"></el-button>
        </div>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-row class="table">
      <el-col :span="24">
        <el-table :data="foorList" border style="width: 100%">
          <el-table-column prop="image" label="图片">
            <template v-slot="{ row }">
              <img :src="row.image" alt="" />
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题"> </el-table-column>
          <el-table-column prop="desc" label="介绍"> </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button type="primary" @click="editorFn(row.id)">编辑</el-button>
              <el-button type="danger" @click="delFn(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="paging">
        <el-pagination background layout="prev, pager, next" :total="total" @current-change="currentChange">
        </el-pagination>
      </el-col>
    </el-row>
    <!-- 弹框 -->
    <addDialog ref="addDialogTe" :dialogVisible="dialogVisible" :textData="textData" @cancel="cancelFn"
      @addTextFn="addTextFn"></addDialog>
  </div>
</template>

<script>
import { getCategorieList, delCategories } from "@/api/categories";
import addDialog from "./component/add-dialog.vue";
export default {
  components: { addDialog },
  data() {
    return {
      // 分页
      pagingList: {
        _limit: 2,
        _start: 0,
      },
      total: 0,
      foorList: [],
      // 搜索
      search: "",
      // 添加弹框
      dialogVisible: false,
      textData: ''
    };
  },
  created() {
    this.getCategorieListFn(this.pagingList);
    this.pagingFn();
  },
  methods: {
    // 删除
    async delFn(id) {
      await delCategories(id)
      this.getCategorieListFn(this.pagingList)
      if (this.foorList.length === 1 && this.pagingList._start !== 1) {
        this.pagingList._start--
        this.getCategorieListFn(this.pagingList);
        this.pagingFn();
      }
    },
    // 编辑
    async editorFn(id) {
      this.$refs.addDialogTe.pupListFn(id)
      this.dialogVisible = true
      this.textData = '编辑分类'
      // console.log(this.text);
    },
    // 新增
    addTextFn() {
      this.getCategorieListFn(this.pagingList);
      this.pagingFn();
    },
    // 弹框
    addFn() {
      this.dialogVisible = true;
      this.textData = '新增分类'
      // console.log(this.text);
    },
    cancelFn() {
      this.dialogVisible = false;
    },
    // 分页
    async pagingFn(data) {
      const res = await getCategorieList(data);
      this.total = Math.ceil(res.data.length / this.pagingList._limit) * 10;
    },
    currentChange(page) {
      this.pagingList._start = (page - 1) * this.pagingList._limit;
      this.getCategorieListFn(this.pagingList);
    },
    // 搜索
    searchFn() {
      if (this.search !== "") {
        this.pagingList["title_contains"] = this.search;
        this.getCategorieListFn(this.pagingList);
        this.pagingFn(this.pagingList);
        this.search = "";
        this.pagingList = {
          _limit: 2,
          _start: 0,
        };
      } else {
        this.getCategorieListFn(this.pagingList);
        this.pagingFn();
      }
    },
    // 渲染列表
    async getCategorieListFn(list) {
      const res = await getCategorieList(list);
      this.foorList = res.data;
    },
  },
};
</script>

<style lang="scss" scoped>
.categories {
  padding: 20px;
  display: flex;
  justify-content: space-between;

  .el-input {
    width: 400px;
  }

  .search {
    background-color: #cbcaca;
  }

  .categoriesBox {
    width: 50px;
    height: 50px;
    background-color: aqua;
  }
}

.table {
  border-top: 1px solid #000;
  margin: 0 10px 10px 10px;
  padding-top: 10px;

  img {
    width: 150px;
    height: 150px;
  }
}

.paging {
  display: flex;
  justify-content: center;
}

.el-table-column {
  width: 25%;
}
</style>